<template>
	<view v-if="display">
		<view class="msg_box" v-if="data !== undefined && data!== null && data .length>0">
			<view class="msg" v-for="(item,index) in data" :key="index" @click="details(item.id)">
				<view class="isRead" :class="item.is_read==2?'read':'unread'">
					<text v-if="item.is_read==2">已读</text>
					<text v-else>未读</text>
				</view>
				<text class="msg_time">{{item.sendTime}}</text>
				<view class="" style="display: flex;align-items: center;justify-content: space-between;">
					<text>{{item.title}}</text>
					<u-icon name="arrow-right" color="#b1b1b1" size="12"></u-icon>
				</view>
			</view>
		</view>
		<u-empty v-else mode="message" icon="/static/Empty/data_null.png">
		</u-empty>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				data: [],
				display: false
			}
		},
		onShow() {
			this._list()
		},
		methods: {
			//跳转详情
			details(id) {
				uni.navigateTo({
					url: '/pages/public/message/message_details?id=' + id
				})
			},
			//列表接口
			async _list() {
				uni.showLoading({
					title: '加载中'
				});
				const userinfo = uni.getStorageSync('userinfo');
				const {
					data: res
				} = await this.$myHttp({
					url: 'Message/lists',
					data: {},
				});
				this.data = res.data.data
				this.display = true
				uni.hideLoading();
			},
		}
	}
</script>

<style lang="scss" scoped>
	.msg_box {
		padding: 30rpx;
		box-sizing: border-box;

		.msg {
			background-color: #ffffff;
			// border-bottom: #eeeeee 1px solid;
			box-shadow: 0px 0px 30px -22px #888888;
			margin-bottom: 30rpx;
			border-radius: 15rpx;
			padding: 30rpx;
			position: relative;
			
			.isRead {
				position: absolute;
				top: 0rpx;
				right: 0rpx;
				font-size: 24rpx;
				padding: 10rpx 20rpx;
				border-top-right-radius: 15rpx;
				border-bottom-left-radius: 15rpx;
			}
			
			.read {
				background-color: #c8c9cc;
			}
			
			.unread {
				background-color: #fa3534;
				color: #ffffff;
			}

			.msg_time {
				// text-align: center;
				font-size: 24rpx;
				color: #666666;
				display: block;
				// margin: 30rpx 0 20rpx 0;
				padding-bottom: 20rpx;
				// border-bottom: 1px #eee dashed;
			}
		}

	}
</style>